<%--
  Created by IntelliJ IDEA.
  User: 马跃
  Date: 2021/1/15
  Time: 9:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html style="height: 100%">
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>

    <style type="text/css">
        * {
            box-sizing: border-box;
            padding: 0;
            margin: 0;
        }

        div {
            width: 100%;
            height: 100%;
            background-color: white;
            padding-left: 1%;
        }

        #d1 {
            width: 90%;
            height: 5%;
            position: relative;
            background-color: white;
            font-family: "宋体";
            font-size: 14px;
            padding-top: 1%;
            padding-left: 1%;
            padding-right: 1%;
        }

        #d1-1 {
            width: 30%;
            height: 100%;

            float: left;
        }

        #d1-2 {
            width: 4%;
            height: 120%;
            background-color: #009688;
            float: right;
            margin-top: -0.5%;
        }

        #d2 {
            width: 90%;
            height: 10%;
            position: relative;
            background-color: #EEEEEE;
            padding-top: 1%;
            padding-left: 1%;
        }

        #d2-1 {
            width: 9%;
            height: 70%;
            float: left;
            background-color: red;
            padding-top: 0.5%;
            padding-left: 1%;
        }

        #d2-2 {
            width: 9%;
            height: 70%;
            float: left;
            background-color: green;
            margin-left: 1%;
            padding-top: 0.5%;
            padding-left: 1%;
        }

        #d3 {
            width: 90%;
            height: 80%;
            position: relative;
            margin-top: 1%;
        }

        table {
            border-collapse: collapse;
            line-height: 30px;
            width: 100%;
            height: 80%;
            text-align: center;
        }

        a {
            text-decoration: none;
            color: black;
        }
    </style>
</head>
<body style="height: 100%">
<div>
    <div id="d1">

        <div id="d1-1">首页/演示/导航元素</div>
        <div id="d1-2">
            <a href="/userQueryAll">
                <img src="../../image/update.png" width="20px" height="20px">
            </a>
        </div>
    </div>
    <hr width="90%" color="gray">
    <div id="d2">
        <div id="d2-1">
            <img src="../../image/delete2.png" width="20px" height="20px">
            <a id="delete" href="#">批量删除</a>
        </div>
        <div id="d2-2">
            <img src="../../image/add.png" width="20px" height="20px">
            <a href="./Adminastrator/user/addUser.html" target="i">添加</a>
        </div>
    </div>
    <div id="d3">
        <table border="1">
            <tr>
                <td width="5%">
                    <input type="checkbox" id="one" value="">
                </td>
                <td>序号</td>
                <td>登录账号</td>
                <td>登录密码</td>
                <td>真实姓名</td>
                <td>年龄</td>
                <td>电话</td>
                <td>状态</td>
                <td width="9%">操作</td>
            </tr>
            <form action="/serDeleteBatches" method="post">
                <c:forEach items="${pageModel.list}" var="user" varStatus="status">

                    <tr>
                        <td><input type="checkbox" value="${user.u_id}" name="key" class="two"></td>
                        <td>${status.index}</td>
                        <td>${user.u_account}</td>
                        <td>******</td>
                        <td>${user.u_name}</td>
                        <td>${user.u_age}</td>
                        <td>${user.u_phone}</td>
                        <td>${user.u_status}</td>
                        <td>
                            <a href="userUpdate?id=${user.u_id}" target="i"><img src="../../image/update2.png"
                                                                                 width="20px" height="20px"></a>&nbsp;
                            <a href="userUpdateEdit?id=${user.u_id}"><img src="../../image/edit-2.png" width="20px"
                                                                          height="20px"></a>
                            <a href="userDelete?id=${user.u_id}"><img src="../../image/delete2.png" width="20px"
                                                                      height="20px"></a>
                        </td>
                    </tr>

                </c:forEach>
                <input id="dosth" type="submit" style="display: none">
            </form>
            <script>

                var dodelete = document.getElementById("delete");

                dodelete.onclick = function () {

                    var dosth = document.getElementById("dosth");

                    dosth.click();

                }

                var one = document.getElementById("one");

                var two = document.getElementsByClassName("two")

                one.onclick = function () {
                    for (let i = 0; i < two.length; i++) {
                        two[i].checked = one.checked;
                    }
                }

            </script>
        </table>
        <jsp:include page="../../pageInfo.jsp">
            <jsp:param name="path" value="${pageContext.request.contextPath}/user/userManager"/>
        </jsp:include>
    </div>
</div>

</body>
</html>
